{% extends 'base.html' %}

{% block title %}我的成绩 - 校园生活助手系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏导航 -->
        <div class="col-md-3 sidebar">
            <div class="sidebar-content">
                <h3 class="sidebar-title">成绩导航</h3>
                <ul class="sidebar-menu">
                    <li class="sidebar-menu-item active">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-line-chart mr-2"></i>成绩总览
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-calendar mr-2"></i>学期成绩
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-tasks mr-2"></i>课程详情
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-bar-chart mr-2"></i>成绩分析
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-file-text-o mr-2"></i>成绩报告
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-clock-o mr-2"></i>成绩历史
                        </a>
                    </li>
                    <li class="sidebar-menu-item">
                        <a href="#" class="sidebar-menu-link">
                            <i class="fa fa-question-circle mr-2"></i>成绩申诉
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="col-md-9 main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1 class="page-title">我的成绩</h1>
                <div class="page-actions">
                    <div class="semester-selector">
                        <select class="form-control">
                            <option value="current">2023-2024学年第一学期</option>
                            <option value="previous">2023-2024学年第二学期</option>
                            <option value="2022-2023-1">2022-2023学年第一学期</option>
                            <option value="2022-2023-2">2022-2023学年第二学期</option>
                            <option value="2021-2022-1">2021-2022学年第一学期</option>
                            <option value="2021-2022-2">2021-2022学年第二学期</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" id="export-scores-btn">
                        <i class="fa fa-download mr-1"></i>导出成绩
                    </button>
                </div>
            </div>
            
            <!-- 成绩概览 -->
            <div class="section score-overview">
                <h2 class="section-title">成绩概览</h2>
                <div class="overview-cards">
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <i class="fa fa-star"></i>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">3.85</div>
                            <div class="overview-card-title">当前学期GPA</div>
                        </div>
                    </div>
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <i class="fa fa-graduation-cap"></i>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">3.78</div>
                            <div class="overview-card-title">累计GPA</div>
                        </div>
                    </div>
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <div class="progress-ring">
                                <svg class="progress-ring-circle" viewBox="0 0 36 36">
                                    <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="transparent" stroke-width="3" stroke="#ddd"></path>
                                    <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="transparent" stroke-width="3" stroke="#36a2eb" stroke-dasharray="86.95" stroke-dashoffset="18.26"></path>
                                </svg>
                                <span class="progress-ring-text">85%</span>
                            </div>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">85</div>
                            <div class="overview-card-title">平均成绩</div>
                        </div>
                    </div>
                    <div class="overview-card">
                        <div class="overview-card-icon">
                            <i class="fa fa-check-circle"></i>
                        </div>
                        <div class="overview-card-content">
                            <div class="overview-card-number">12</div>
                            <div class="overview-card-title">已完成学分</div>
                        </div>
                    </div>
                </div>
                
                <!-- 成绩分布 -->
                <div class="score-distribution">
                    <h3 class="distribution-title">成绩分布</h3>
                    <div class="distribution-chart">
                        <div class="distribution-item">
                            <div class="distribution-label">优秀</div>
                            <div class="distribution-bar">
                                <div class="distribution-fill" style="width: 35%"></div>
                            </div>
                            <div class="distribution-percentage">35%</div>
                        </div>
                        <div class="distribution-item">
                            <div class="distribution-label">良好</div>
                            <div class="distribution-bar">
                                <div class="distribution-fill" style="width: 40%"></div>
                            </div>
                            <div class="distribution-percentage">40%</div>
                        </div>
                        <div class="distribution-item">
                            <div class="distribution-label">中等</div>
                            <div class="distribution-bar">
                                <div class="distribution-fill" style="width: 15%"></div>
                            </div>
                            <div class="distribution-percentage">15%</div>
                        </div>
                        <div class="distribution-item">
                            <div class="distribution-label">及格</div>
                            <div class="distribution-bar">
                                <div class="distribution-fill" style="width: 10%"></div>
                            </div>
                            <div class="distribution-percentage">10%</div>
                        </div>
                        <div class="distribution-item">
                            <div class="distribution-label">不及格</div>
                            <div class="distribution-bar">
                                <div class="distribution-fill fail" style="width: 0%"></div>
                            </div>
                            <div class="distribution-percentage">0%</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 标签页导航 -->
            <div class="tabs">
                <ul class="tab-list">
                    <li class="tab-item">
                        <a href="#all-courses" class="tab-link active">全部课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#major-courses" class="tab-link">专业课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#general-courses" class="tab-link">通识课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#elective-courses" class="tab-link">选修课程</a>
                    </li>
                    <li class="tab-item">
                        <a href="#failed-courses" class="tab-link">需重考课程</a>
                    </li>
                </ul>
            </div>
            
            <!-- 成绩列表 -->
            <div class="tab-content">
                <!-- 全部课程成绩 -->
                <div id="all-courses" class="tab-pane active">
                    <div class="score-table-container">
                        <table class="table score-table">
                            <thead>
                                <tr>
                                    <th class="table-checkbox">
                                        <input type="checkbox">
                                    </th>
                                    <th>课程名称</th>
                                    <th>课程类型</th>
                                    <th>学分</th>
                                    <th>总成绩</th>
                                    <th>平时成绩</th>
                                    <th>期中成绩</th>
                                    <th>期末成绩</th>
                                    <th>成绩等级</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>计算机网络基础</td>
                                    <td>专业必修课</td>
                                    <td>3</td>
                                    <td class="score">92</td>
                                    <td>95</td>
                                    <td>90</td>
                                    <td>91</td>
                                    <td class="grade excellent">优秀</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>数据结构与算法</td>
                                    <td>专业必修课</td>
                                    <td>4</td>
                                    <td class="score">88</td>
                                    <td>90</td>
                                    <td>85</td>
                                    <td>89</td>
                                    <td class="grade excellent">优秀</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>数据库系统原理</td>
                                    <td>专业必修课</td>
                                    <td>3</td>
                                    <td class="score">85</td>
                                    <td>88</td>
                                    <td>82</td>
                                    <td>86</td>
                                    <td class="grade good">良好</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>人工智能导论</td>
                                    <td>专业选修</td>
                                    <td>3</td>
                                    <td class="score">90</td>
                                    <td>92</td>
                                    <td>88</td>
                                    <td>91</td>
                                    <td class="grade excellent">优秀</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>程序设计基础</td>
                                    <td>专业必修课</td>
                                    <td>4</td>
                                    <td class="score">92</td>
                                    <td>94</td>
                                    <td>90</td>
                                    <td>93</td>
                                    <td class="grade excellent">优秀</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>离散数学</td>
                                    <td>专业基础课</td>
                                    <td>3</td>
                                    <td class="score">85</td>
                                    <td>87</td>
                                    <td>83</td>
                                    <td>86</td>
                                    <td class="grade good">良好</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>大学英语</td>
                                    <td>公共必修课</td>
                                    <td>2</td>
                                    <td class="score">82</td>
                                    <td>85</td>
                                    <td>80</td>
                                    <td>83</td>
                                    <td class="grade medium">中等</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>高等数学</td>
                                    <td>公共必修课</td>
                                    <td>5</td>
                                    <td class="score">78</td>
                                    <td>80</td>
                                    <td>75</td>
                                    <td>80</td>
                                    <td class="grade medium">中等</td>
                                    <td class="status passed">已通过</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页控制 -->
                    <div class="pagination">
                        <span class="pagination-item">
                            <a href="#" class="pagination-link disabled">&laquo;</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link active">1</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link">2</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link">3</a>
                        </span>
                        <span class="pagination-item">
                            <a href="#" class="pagination-link">&raquo;</a>
                        </span>
                    </div>
                </div>
                
                <!-- 专业课程成绩 -->
                <div id="major-courses" class="tab-pane">
                    <div class="score-table-container">
                        <table class="table score-table">
                            <!-- 内容会通过JavaScript动态加载 -->
                        </table>
                    </div>
                </div>
                
                <!-- 通识课程成绩 -->
                <div id="general-courses" class="tab-pane">
                    <div class="score-table-container">
                        <table class="table score-table">
                            <!-- 内容会通过JavaScript动态加载 -->
                        </table>
                    </div>
                </div>
                
                <!-- 选修课程成绩 -->
                <div id="elective-courses" class="tab-pane">
                    <div class="score-table-container">
                        <table class="table score-table">
                            <!-- 内容会通过JavaScript动态加载 -->
                        </table>
                    </div>
                </div>
                
                <!-- 需重考课程 -->
                <div id="failed-courses" class="tab-pane">
                    <div class="score-table-container">
                        <table class="table score-table">
                            <!-- 内容会通过JavaScript动态加载 -->
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 成绩分析 -->
            <div class="section score-analysis">
                <h2 class="section-title">成绩分析</h2>
                <div class="analysis-content">
                    <div class="chart-container">
                        <canvas id="scoreTrendChart"></canvas>
                    </div>
                    <div class="analysis-summary">
                        <h3 class="summary-title">成绩趋势分析</h3>
                        <p class="summary-text">从近几个学期的成绩趋势来看，你的专业课程成绩保持稳定并有所提升，尤其是在数据结构与算法等核心课程上表现优秀。通识课程成绩相对稳定，建议可以适当加强高等数学等基础课程的学习。</p>
                        <div class="strengths-weaknesses">
                            <div class="strengths">
                                <h4><i class="fa fa-check-circle text-success"></i> 优势</h4>
                                <ul>
                                    <li>计算机网络基础表现优异</li>
                                    <li>程序设计能力强</li>
                                    <li>课堂参与度高</li>
                                    <li>实验课成绩优秀</li>
                                </ul>
                            </div>
                            <div class="weaknesses">
                                <h4><i class="fa fa-exclamation-circle text-warning"></i> 改进空间</h4>
                                <ul>
                                    <li>高等数学需要加强</li>
                                    <li>理论知识应用能力可提升</li>
                                    <li>部分课程复习不够充分</li>
                                </ul>
                            </div>
                        </div>
                        <div class="recommendations">
                            <h4><i class="fa fa-lightbulb-o text-primary"></i> 学习建议</h4>
                            <p>基于你的成绩分析，建议你在保持专业课程优势的同时，加强数学基础的学习，这将对你后续的算法和人工智能相关课程学习有很大帮助。另外，可以考虑参加一些编程竞赛或项目实践，提升理论知识的应用能力。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 待完成课程 -->
            <div class="section pending-courses">
                <h2 class="section-title">待完成课程</h2>
                <div class="pending-courses-list">
                    <div class="pending-course-item">
                        <div class="pending-course-info">
                            <h3 class="pending-course-title">操作系统原理</h3>
                            <div class="pending-course-meta">
                                <span class="pending-course-type">专业必修课</span>
                                <span class="pending-course-credit">3学分</span>
                                <span class="pending-course-status">进行中</span>
                            </div>
                            <div class="pending-course-progress">
                                <div class="progress-bar">
                                    <div class="progress" style="width: 60%"></div>
                                </div>
                                <div class="progress-text">60% 完成</div>
                            </div>
                        </div>
                        <div class="pending-course-actions">
                            <button class="btn btn-sm btn-primary">进入学习</button>
                            <button class="btn btn-sm btn-outline-secondary">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="pending-course-item">
                        <div class="pending-course-info">
                            <h3 class="pending-course-title">编译原理</h3>
                            <div class="pending-course-meta">
                                <span class="pending-course-type">专业必修课</span>
                                <span class="pending-course-credit">3学分</span>
                                <span class="pending-course-status">进行中</span>
                            </div>
                            <div class="pending-course-progress">
                                <div class="progress-bar">
                                    <div class="progress" style="width: 45%"></div>
                                </div>
                                <div class="progress-text">45% 完成</div>
                            </div>
                        </div>
                        <div class="pending-course-actions">
                            <button class="btn btn-sm btn-primary">进入学习</button>
                            <button class="btn btn-sm btn-outline-secondary">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="pending-course-item">
                        <div class="pending-course-info">
                            <h3 class="pending-course-title">软件工程</h3>
                            <div class="pending-course-meta">
                                <span class="pending-course-type">专业必修课</span>
                                <span class="pending-course-credit">4学分</span>
                                <span class="pending-course-status">进行中</span>
                            </div>
                            <div class="pending-course-progress">
                                <div class="progress-bar">
                                    <div class="progress" style="width: 70%"></div>
                                </div>
                                <div class="progress-text">70% 完成</div>
                            </div>
                        </div>
                        <div class="pending-course-actions">
                            <button class="btn btn-sm btn-primary">进入学习</button>
                            <button class="btn btn-sm btn-outline-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 标签页切换功能
        const tabLinks = document.querySelectorAll('.tab-link');
        tabLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动标签
                document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
                document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
                
                // 添加当前活动标签
                this.classList.add('active');
                const targetId = this.getAttribute('href').substring(1);
                document.getElementById(targetId).classList.add('active');
                
                // 加载对应标签页的数据
                loadTabData(targetId);
            });
        });
        
        // 导出成绩按钮点击事件
        document.getElementById('export-scores-btn').addEventListener('click', function() {
            // 实际项目中这里会有导出成绩的逻辑
            alert('即将导出成绩表！实际项目中会生成并下载成绩的Excel或PDF文件');
        });
        
        // 学期选择变更事件
        const semesterSelector = document.querySelector('.semester-selector select');
        semesterSelector.addEventListener('change', function() {
            // 实际项目中这里会有切换学期的逻辑
            const selectedSemester = this.options[this.selectedIndex].text;
            alert(`已切换到学期：${selectedSemester}！实际项目中会加载该学期的成绩数据`);
        });
        
        // 表格中的复选框全选功能
        const tableCheckbox = document.querySelector('.score-table input[type="checkbox"]:first-child');
        tableCheckbox.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.score-table tbody input[type="checkbox"]');
            checkboxes.forEach(cb => {
                cb.checked = this.checked;
            });
        });
        
        // 查看详情按钮点击事件
        const detailButtons = document.querySelectorAll('.btn-outline-primary');
        detailButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 实际项目中这里会跳转到课程成绩详情页
                const row = this.closest('tr');
                const courseName = row.querySelector('td:nth-child(2)').textContent;
                alert(`即将查看课程：${courseName}的成绩详情！实际项目中会跳转到课程成绩详情页面`);
            });
        });
        
        // 进入学习按钮点击事件（待完成课程）
        const enterCourseButtons = document.querySelectorAll('.btn-primary:not(#export-scores-btn)');
        enterCourseButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 实际项目中这里会跳转到课程学习页
                const courseItem = this.closest('.pending-course-item');
                const courseName = courseItem.querySelector('.pending-course-title').textContent;
                alert(`即将进入课程：${courseName}学习页面！实际项目中会跳转到课程学习页面`);
            });
        });
        
        // 分页链接点击事件
        const paginationLinks = document.querySelectorAll('.pagination-link:not(.disabled)');
        paginationLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                if (this.classList.contains('active')) {
                    return;
                }
                
                // 实际项目中这里会有分页加载数据的逻辑
                const pageText = this.textContent.trim();
                let pageNum = 1;
                
                if (pageText === '1' || pageText === '2' || pageText === '3') {
                    pageNum = parseInt(pageText);
                } else if (pageText === '»') {
                    pageNum = 2; // 假设是下一页
                } else if (pageText === '«') {
                    pageNum = 1; // 假设是上一页
                }
                
                // 更新活动页码
                document.querySelectorAll('.pagination-link').forEach(l => l.classList.remove('active'));
                this.classList.add('active');
                
                alert(`即将跳转到第${pageNum}页！实际项目中会加载该页的成绩数据`);
            });
        });
        
        // 侧边栏菜单点击事件
        const sidebarLinks = document.querySelectorAll('.sidebar-menu-link');
        sidebarLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动菜单
                document.querySelectorAll('.sidebar-menu-item').forEach(item => item.classList.remove('active'));
                
                // 添加当前活动菜单
                this.closest('.sidebar-menu-item').classList.add('active');
                
                // 实际项目中这里会有切换不同功能页面的逻辑
                const menuText = this.textContent.trim();
                alert(`即将跳转到：${menuText}页面！实际项目中会跳转到相应的功能页面`);
            });
        });
        
        // 模拟加载学习趋势图表
        if (typeof Chart !== 'undefined') {
            const ctx = document.getElementById('scoreTrendChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['2021-1', '2021-2', '2022-1', '2022-2', '2023-1'],
                    datasets: [{
                        label: '专业课程平均分',
                        data: [78, 82, 85, 88, 90],
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2,
                        tension: 0.3
                    }, {
                        label: '通识课程平均分',
                        data: [82, 80, 79, 81, 82],
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 2,
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 70
                        }
                    }
                }
            });
        } else {
            console.log('Chart.js is not loaded. Charts will not be rendered.');
        }
        
        // 加载标签页数据
        function loadTabData(tabId) {
            // 实际项目中这里会根据tabId加载不同的数据
            const tableContainer = document.getElementById(tabId).querySelector('.score-table-container table');
            
            if (tableContainer.rows.length <= 1) { // 如果只有表头或没有数据
                // 显示加载中提示
                tableContainer.innerHTML = '<tbody><tr><td colspan="11" class="loading">加载中...</td></tr></tbody>';
                
                // 模拟异步加载数据
                setTimeout(() => {
                    let tableHtml = '<thead><tr><th class="table-checkbox"><input type="checkbox"></th><th>课程名称</th><th>课程类型</th><th>学分</th><th>总成绩</th><th>平时成绩</th><th>期中成绩</th><th>期末成绩</th><th>成绩等级</th><th>状态</th><th>操作</th></tr></thead><tbody>';
                    
                    // 获取所有课程数据
                    const allCourses = document.querySelectorAll('#all-courses .score-table tbody tr');
                    let hasCourses = false;
                    
                    // 根据不同的标签页筛选课程
                    allCourses.forEach(row => {
                        const courseType = row.querySelector('td:nth-child(3)').textContent;
                        const status = row.querySelector('td:nth-child(10)').textContent;
                        const score = parseInt(row.querySelector('td:nth-child(5)').textContent);
                        
                        if ((tabId === 'major-courses' && (courseType.includes('专业') || courseType.includes('基础'))) ||
                            (tabId === 'general-courses' && courseType.includes('公共')) ||
                            (tabId === 'elective-courses' && courseType.includes('选修')) ||
                            (tabId === 'failed-courses' && status === '未通过')) {
                            
                            tableHtml += row.outerHTML;
                            hasCourses = true;
                        }
                    });
                    
                    // 如果没有相关课程，显示提示
                    if (!hasCourses) {
                        tableHtml += '<tr><td colspan="11" class="no-courses">暂无相关课程</td></tr>';
                    }
                    
                    tableHtml += '</tbody>';
                    tableContainer.innerHTML = tableHtml;
                    
                    // 重新绑定事件
                    bindTableEvents(tabId);
                }, 500);
            }
        }
        
        // 绑定表格事件
        function bindTableEvents(tabId) {
            // 表格中的复选框全选功能
            const tableCheckbox = document.querySelector(`#${tabId} .score-table input[type="checkbox"]:first-child`);
            if (tableCheckbox) {
                tableCheckbox.addEventListener('change', function() {
                    const checkboxes = document.querySelectorAll(`#${tabId} .score-table tbody input[type="checkbox"]`);
                    checkboxes.forEach(cb => {
                        cb.checked = this.checked;
                    });
                });
            }
            
            // 查看详情按钮点击事件
            const detailButtons = document.querySelectorAll(`#${tabId} .btn-outline-primary`);
            detailButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 实际项目中这里会跳转到课程成绩详情页
                    const row = this.closest('tr');
                    const courseName = row.querySelector('td:nth-child(2)').textContent;
                    alert(`即将查看课程：${courseName}的成绩详情！实际项目中会跳转到课程成绩详情页面`);
                });
            });
        }
        
        // 页面载入动画效果
        const fadeElements = document.querySelectorAll('.section, .overview-card, .distribution-item, .pending-course-item');
        fadeElements.forEach((element, index) => {
            setTimeout(() => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                
                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, 10);
            }, index * 100);
        });
        
        // 响应式调整
        function adjustForResponsive() {
            const isMobile = window.innerWidth < 768;
            
            // 在移动端隐藏侧边栏，显示顶部菜单按钮（实际项目中会有相应的实现）
            const sidebar = document.querySelector('.sidebar');
            if (isMobile) {
                // 实际项目中这里会有移动端适配的逻辑
            }
            
            // 在移动端调整表格显示方式
            const tables = document.querySelectorAll('.score-table');
            tables.forEach(table => {
                if (isMobile) {
                    // 实际项目中这里会有移动端表格的特殊处理逻辑
                    // 例如将表格转换为卡片式布局等
                }
            });
        }
        
        // 初始调整和窗口大小改变时调整
        adjustForResponsive();
        window.addEventListener('resize', adjustForResponsive);
    });
</script>
{% endblock %}